
let $cut_one = $(".cut-one")
let $cut_two = $(".cut-two")
let $u1 = $(".u1")
let $u2 = $(".u2")
let $container1 = $("#container1")
let $prev = $("#prev")
let $next = $("#next")
let sp1 = $(".hour")
let sp2 = $(".minute")
let sp3 = $(".second")
let $lis = $(".goods-list li")
let start = 1
let $goodsContainer = $(".goods-list-container")
let start_apply = true
let height_goods = 2316
let stairs_apply = true
let t = null;
let y = null;
let loading = false;
let stairs_list = [600,956,1268,1564,2320,0,0]
let $stairs = $(".stairs ul")
let title = $("#user_name")[0]
let userinfo = $("#info_id")[0]
let gender = $("#info_gender")[0]

// 大轮播图
var container1 = new Swiper(".container1", {
    autoplay: {
        delay: 3000,
        pauseOnMouseEnter: true,
        disableOnInteraction:false
    },
    loop: true,
    effect: "fade",
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    }
})
for(i=0;i<container1.pagination.bullets.length;i++){
    container1.pagination.bullets[i].onmouseover=function(){
      this.click();
    };
}
// 大轮播图鼠标划入显示按钮划出隐藏
// 默认为隐藏
$next.css({
    display:"none"
})
$prev.css({
    display:"none"
})
$container1.on("mouseover",function(){
    $next.css({
        display:"block"
    })
    $prev.css({
        display:"block"
    })
})
$container1.on("mouseout",function(){
    $next.css({
        display:"none"
    })
    $prev.css({
        display:"none"
    })
})

// 小轮播图
var container3 = new Swiper('.container3', {
    autoplay:{
        delay: 3000,
        pauseOnMouseEnter: true,
        disableOnInteraction:false
    },
    loop:true,
})

// 小轮播图2
var container4 = new Swiper('.container4', {
    autoplay:{
        delay: 3000,
        pauseOnMouseEnter: true,
        disableOnInteraction:false
    },
    loop:true,
})




// 倒计时
var time = new Date()
function asd() {
    var now = new Date()
    var count = time - now
    var second = parseInt(count / 1000 % 60)
    var minute = parseInt(count / 1000 / 60 % 60)
    var hours = parseInt(count / 1000 / 60 / 60 % 24)
    if (parseInt(count / 1000 % 60) < 10) {
        second = '0' + parseInt(count / 1000 % 60)
    }
    if (parseInt(count / 1000 / 60 % 60) < 10) {
        minute = '0' + parseInt(count / 1000 / 60 % 60)
    }
    if (parseInt(count / 1000 / 60 / 60 % 24) < 10) {
        hours = '0' + parseInt(count / 1000 / 60 / 60 % 24)
    }
    sp1[0].innerHTML = hours
    sp2[0].innerHTML = minute
    sp3[0].innerHTML = second
    if(count<=0){
        time.setHours(time.getHours() + 2)
    }
}

var c = setInterval(asd, 1000)
asd()

// 选项卡
$cut_one.on("mouseover",function(){
    $cut_one.css({
        border: "1px solid #ef0027",
        borderTopLeftRadius: "5px",
        borderBottomLeftRadius: "5px",
        borderRight: "none",
        color: "#ef0027",
        backgroundColor:" white"
    })
    $cut_two.css({
        border: "1px solid #ef0027",
        borderTopRightRadius: "5px",
        borderBottomRightRadius: "5px",
        borderLeft: "none",
        color: "white ",
        backgroundColor:"#ef0027"
    })
    $u1.css({
        display:"block"
    })
    $u2.css({
        display:"none"
    })
})
$cut_two.on("mouseover",function(){
    $cut_two.css({
        border: "1px solid #ef0027",
        borderTopRightRadius: "5px",
        borderBottomRightRadius: "5px",
        borderLeft: "none",
        color: "#ef0027",
        backgroundColor:" white"
    })
    $cut_one.css({
        border: "1px solid #ef0027",
        borderRightRadius: "5px",
        borderBottomLeftRadius: "5px",
        borderRight: "none",
        color: "white",
        backgroundColor:"#ef0027"
    })
    $u2.css({
        display:"block"
    })
    $u1.css({
        display:"none"
    })
})

// 头部搜索
let $seek = $(".seek")
$seek.on("focus",function(){
    $seek.attr("value","")
})
$seek.on("blur",function(){
    $seek.attr("value","空调分期至高24期免息")
})




// 底部选项卡
$lis.on("mouseenter",function(){
    for(let i = 0 ;i<$(this).siblings().children().length;i++){
        if(i%2===0){
            $(this).siblings().children().children().eq(i).css({
            display:"inline-block"
            })
        }else{
            $(this).siblings().children().children().eq(i).css({
            display:"none"
            })
        }
    }
    for(let i = 0 ;i<$(this).siblings().children().length;i++){
        if(i%2===0){
            $(this).siblings().children()[i].style.color="#000"
        }else{
            $(this).siblings().children().eq(i).css({
                backgroundColor:"white",
                color:"#999"
            })
        }
    }
    $(this).children().eq(0).css({
        color:"#f88000"
    })
    $(this).children().eq(0).children().eq(0).css({
        display:"none"
    })
    $(this).children().eq(0).children().eq(1).css({
        display:"inline-block"
    })
    $(this).children().eq(1).css({
        backgroundColor: "#f88000",
        color:"white"
    }) 
})


// 请求
function load() {
    let options = {
          url : "http://127.0.0.1:8888/goods/list",
          type : "GET",
          data: {
                current:start,
                pagesize:30
          },
          dataType : "json"
    }
    return  $.ajax(options);
}
// 处理请求返回的数据
function render(data){
    console.log(data.list[0].goods_id);
    start += 1
    $goodsContainer.append(data.list.map(
        item =>
        `   <a href="./goods_list.html#id=${item.goods_id}">
            <li>
                <img class="lazy" src="${item.img_big_logo}" alt="">
                <p>${item.title}</p>
                <p>满950减110</p>
                <p>￥<span>${item.price}</span><span>￥${parseFloat(item.price) + 10}</span></p>
            </li>
            
        `
    ).join(""))
}

// 页面滚动渲染数据
$(window).scroll( function(){
        let scrollTop = $("html,body").scrollTop();
        // console.log(scrollTop);
        if(scrollTop>=600&&stairs_apply){
            $(".stairs").css({
                display:"block"
            })
        }else{
            $(".stairs").css({
                display:"none"
            })
        }
        

        if(scrollTop>=1700&&start_apply){
        load()
        .done(function(data){
        render(data)
        $(".lazy").lazyload()
        })
        start_apply = false
        }
        if(scrollTop<600){
            $(".top-menu-wrapper").css({
                display:"none"
            })
        }else{
            $(".top-menu-wrapper").css({
                display:"block"
            })
        }
        if(typeof y === "number"){
            clearTimeout( y)
        }
        y = setTimeout(function(){
            if(scrollTop>=stairs_list[0]&&scrollTop<stairs_list[1]-5){
            $(".stairs").children().eq(1).children().removeAttr("class")
            $(".stairs").children().eq(1).children().eq(0).attr("class","lis-active")
            }else if(scrollTop>=stairs_list[1]&&scrollTop<stairs_list[2]){
            $(".stairs").children().eq(1).children().removeAttr("class")
            $(".stairs").children().eq(1).children().eq(1).attr("class","lis-active")
            }else if(scrollTop>=stairs_list[2]&&scrollTop<stairs_list[3]){
            $(".stairs").children().eq(1).children().removeAttr("class")
            $(".stairs").children().eq(1).children().eq(2).attr("class","lis-active")
            }else if(scrollTop>=stairs_list[3]&&scrollTop<stairs_list[4]){
            $(".stairs").children().eq(1).children().removeAttr("class")
            $(".stairs").children().eq(1).children().eq(3).attr("class","lis-active")
            }else if(scrollTop>=stairs_list[4]){
            $(".stairs").children().eq(1).children().removeAttr("class")
            $(".stairs").children().eq(1).children().eq(4).attr("class","lis-active")
            }  
            y=null
        },100)
        

        if( typeof t === "number"){
            return false;
        }
        t = setTimeout(function(){
            t = null
            if(!loading&&(height_goods + 1700 < scrollTop + innerHeight)){
                loading = true
                load()
                .done(function(data){
                    height_goods +=2316
                    loading = !loading
                    render(data)
                    $(".lazy").lazyload()
                })
            }
        },100)
        
})

// 楼梯
$stairs.on("click","li",function(){
    $("html,body")
    .animate({
        scrollTop: (stairs_list[$(this).index()])
    })
    if($(this).index()>4){
        return
    }
    $(this).attr("class","lis-active")
    $(this).siblings().removeAttr("class")
})


// 页面加载完渲染页面
window.onload = function (){
    var userid = getCookie("userid")
    var token = getCookie("token")
    if(userid && token){
        loadUserMsg(userid,token)
        .done(function(data){
            renderUserMsg(data)
        })
        loadUserMsg2(userid,token)
        .done(function(res){
            console.log(res);
            renderCart(res)
        })
    }
}

// 购物车数量渲染
function renderCart(res){
    let num = 0
    res.cart.map(item=>{
        num += item.cart_number
    })
    console.log(num);
    $(".goods-cart-number").html(num)
}

// 发起请求获取购物车列表
function loadUserMsg2(id,token){
    let options = {
        url : "http://127.0.0.1:8888/cart/list",
        method : "GET",
        data: {
            id: id
        },
        headers: {
            authorization: token
        },
        dataType : "json"
  }
  return  $.ajax(options);
}

// 渲染页面
function renderUserMsg(data){
    if(data.code!==1){
        return false
    }
    title.innerHTML = `欢迎：${data.info.nickname}`;
    userinfo.innerHTML = `ID:${data.info.id}`;
    gender.innerHTML = `性别:${data.info.gender}`;
}

// 发起请求获取用户信息
function loadUserMsg(id,token){
    let options = {
        url : "http://127.0.0.1:8888/users/info/"+id,
        method : "GET",
        headers:{
            authorization: token 
      },
        dataType : "json"
  }
  return  $.ajax(options);
}